<template>
  <!-- 添加或修改产品对话框 -->
  <el-dialog :title="title" :visible.sync="visible" width="550px" append-to-body>
    <el-row>
      <p style="padding: 10px; background: rgb(236, 237, 238);">
        在现有物模型配置无法满足设备数据编解码的情况下，需要对协议编解码拓展配置，
        配置信息以JSON格式保存，每条物模型数据对应一个配置，配置信息无需固定模式，
        但是协议包代码使用配置要和当前配置保持一致。
        <span style="color: #f80710">
          注意：每一个JSON对象内有且只有一个属性id，模型内id不能重复，如果id值不存在则清除当前数据。
        </span>
      </p>
    </el-row>

    <el-row style="margin-top: 15px">
      <el-tabs v-model="tabActiveName" type="card">
        <el-tab-pane label="编辑配置" name="whole">
          <!-- 脚本 -->
          <json-editor
            style="height: 400px; overflow: hidden"
            v-model="jsonData"
            :mode="editorOptions.mode"
            :lang="editorOptions.lang"
          />
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import JsonEditor from '@/components/JsonEditor'

export default {
  name: 'ProtocolStandby',
  components: {
    JsonEditor
  },
  data() {
    return {
      // 弹出层标题
      title: '协议支持',
      // 是否显示弹出层
      visible: false,
      // 页签活动页
      tabActiveName: 'whole',
      // 物模型id
      id: undefined,
      // json数据
      jsonData: {},
      // 代码编辑器配置
      editorOptions: {
        mode: 'tree', // 默认模式 tree,code,form,text,view
        lang: 'zh' // zh(中文),en(英文)
      },
      thingType: undefined
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.visible = false
      this.jsonData = {}
      this.id = undefined
    },
    // 打开弹框
    open() {
      this.visible = true
    },

    /** 点击协议支持按钮操作 */
    handleCheck(id, value) {

      if(!id) {
        return
      }

      if (!value) {
        value = {}
      }

      this.id = id
      this.jsonData = value
      this.thingType = value.thingType
      delete this.jsonData.thingType

      this.open()
    },

    /** 点击保存按钮操作 */
    handleSave() {

      const id = this.jsonData.id

      if (id === undefined) {
        this.$set(this.jsonData, 'id', '')
        return
      }

      let jsonCopy = JSON.parse(JSON.stringify(this.jsonData))

      if (!jsonCopy) {
        return
      }

      jsonCopy.thingType = this.thingType

      this.$emit('submit', this.id, jsonCopy, () => {
        this.$modal.msgSuccess('保存成功')
        this.cancel()
      })

    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .jsoneditor-vue {
  height: 100%;
}
</style>
